/*****************************************************************************************
 * floatz.form.css
 * ---------------------------------------------------------------------------------------
 * Provides a common baseline as well as specific classes for form elements
 *
 * @project       floatz CSS Framework
 * @version       1.0.1
 * @see           http://code.google.com/p/floatz/
 * @author        Harald Humml
 * @copyright     Copyright (c) 1998-2010 by :humml:design
 * @link          http://design.humml.eu/toolbox/floatz
 * @license       Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
 * @lastmodified  2010-01-18
 */

/**
 * ---------------------------------------------------------------------------------------
 * @section       Form baseline
 *
 * Baseline styles for standard form elements
 */

/* Sets font style to form elements */
label, 
fieldset {
   font-weight: bold;
}
optgroup {
   font-style: italic;
}

/* Adjusts baseline of input fields and label */
input, 
label, 
select, 
textarea {
   margin: 0.25em 0;
   vertical-align: middle;
}

/* Clears floats for fieldsets and forms */
fieldset, 
form {
   clear: both;
}

/* Sets border styles (because of meyer reset), paddings and encloses floating boxes within 
   fieldset using overflow method (hidden is necessary for Opera <= 8.5) */
fieldset {
   border: 1px solid #000;
   overflow: hidden;
   padding: 1em;
}

/* Corrects wrong padding behaviour of fieldset in IE 5+, 6 and 7 using star hack and first 
   child star hack. Margin-top corrects additional padding of legend - see below */
* html fieldset {
   padding: 0 1em 1em 1em;
   margin-top: -1em;
}
*:first-child+html fieldset {
   padding: 0 1em 1em 1em;
}

/* Changes color as well as padding behaviour of legend within fieldset for IE 5+, 6 and 7 
   using star hack and first child star hack */
* html fieldset legend {
   color: #000;
}
* html legend {
   margin-left: -0.5em;
   padding-top: 1em;
   padding-bottom: 1em;
   padding-left: 0;
}
*:first-child+html legend {
   margin-left: -0.5em;
   margin-top: -1em;
   padding-top: 1em;
   padding-bottom: 1em;
   padding-left: 0;
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Form elements
 *
 * Form elements
 */

/* Textbox */
.flz_textbox {
   background-color: fff;
}

/* Button - changes paddings for buttons as well as wrong padding behaviour 
   of IE 5+, 6 and 7 using star hack and first child star hack */
.flz_button {
   padding: 0.1em 0.3em;
}
* html .flz_button {
   overflow: visible;
   width: 1;            /* to collapse table cell arround button */
}
*:first-child+html .flz_button {
   overflow: visible;
   width: 1;            /* to collapse table cell arround button */
}

/* Radio button */
.flz_radio {
}

/* Checkbox */
.flz_checkbox {
}

/* Marker for mandatory fields */
.flz_mandatory {
   background-color: yellow;
}

/* Marker for readonly fields */
.flz_readonly {
   background-color: #efefef;
   color: #aaa;
}

/* Block form element marker class */
.flz_blockform label, 
.flz_blockform select {
   display: block;
   width: 100%;
}
.flz_blockform input {
   display: block;
   width: 99.4%;
}
.flz_blockform textarea {
   display: block;
   width: 99.4%;
}

/* Resets width for button, checkbox and radio marker classes to auto */
.flz_blockform .flz_button, 
.flz_blockform .flz_checkbox, 
.flz_blockform .flz_radio {
   width: auto;
}

/* Resets display for button, checkbox and radio marker classes within blocked forms to 
   inline. For checkboxes and radios, this is necessary to support background color of <span> 
   for mandatory fields in Firefox, Google Chrome and Apple Safari (see also class mandatory) */

.flz_blockform .flz_button, 
.flz_blockform .flz_checkbox, 
.flz_blockform .flz_radio {
   display: inline;
}

/* Corrects margins for all input fields and textareas within blocked forms for IE 5+ and 6.
   These corrections must be reset for buttons marker class. */
* html .flz_blockform input, 
* html .flz_blockform textarea {
   margin-right: -10px;
}
* html .flz_blockform .flz_button {
   margin-right: 0;
}
/* Inline marker class to convert blocked to inline elements within blocked form */
.flz_blockform .flz_inline {
   display: inline;
   margin: 0.25em 0;
   width: auto;
}
.flz_blockform .flz_radio .flz_inline, 
.flz_blockform .flz_checkbox .flz_inline {
   margin-right: 0.25em;   
}

/* Combifield marker classes to combine fields with images in one line (e.g. date field with 
   date picker image) */
.flz_combifield {
   margin-right: 1.5em;
   padding-right: 0.5em;
}
span.flz_combifield,
img.flz_combifield {
   padding: 0;
   margin: 0;
   position: absolute;
   bottom: 0.25em;
   right: 0;
   z-index: 3;
} 
